<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>个人中心</title>
<link href="bootstrapusers/css/bootstrap.css" rel="stylesheet"
	type="text/css" media="all">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bootstrapusers/js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="bootstrapusers/css/style.css" rel="stylesheet"
	type="text/css" media="all" />
<link href="bootstrapusers/css/style1.css" rel="stylesheet"
	type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<c:if test="${sessionScope.user==null}">

	<meta http-equiv="refresh" content="0;url=index">

</c:if>



<script type="application/x-javascript">
	
	
	
	

	addEventListener("load", function() {
	setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
	window.scrollTo(0, 1);
}









</script>
<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Hind:400,300'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Aladin'
	rel='stylesheet' type='text/css'>
<!--google fonts-->
<!-- animated-css -->
<link href="bootstrapusers/css/animate.css" rel="stylesheet"
	type="text/css" media="all">
<link href="bootstrapusers/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrapusers/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
<!-- Custom styles for this template -->
<link href="bootstrapusers/css/style2.css" rel="stylesheet">
<link href="bootstrapusers/fonts/antonio-exotic/stylesheet.css"
	rel="stylesheet">
<link rel="stylesheet" href="bootstrapusers/css/lightbox.min.css">
<link href="bootstrapusers/css/responsive.css" rel="stylesheet">
<!-- ------------------------------引入layui的css和js样式------------------------------------- -->
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="layuiadmin/style/template.css" media="all">


<!-- -------------------------------------------------------------------------------------- -->
<script src="bootstrapusers/js/jquery.min.js" type="text/javascript"></script>
<!-- <script src="js/bootstrap.min.js" type="text/javascript"></script>-->
<script src="bootstrapusers/js/lightbox-plus-jquery.min.js"
	type="text/javascript"></script>
<script src="bootstrapusers/js/instafeed.min.js" type="text/javascript"></script>
<script src="bootstrapusers/js/custom.js" type="text/javascript"></script>
<script src="bootstrapusers/js/wow.min.js"></script>
<script>
	new WOW().init();
</script>
<!-- animated-css -->
<script src="bootstrapusers/js/bootstrap.min.js"></script>
</head>
<body>
	<!--header-top start here-->
	<%@ include file="header.jsp"%>
	<!--header end here-->
	<!--services strat here-->
	<div class="layui-fluid layadmin-homepage-fluid">
		<div class="layui-row layui-col-space8">
			<div class="layui-col-md2">
				<div class="layadmin-homepage-panel layadmin-homepage-shadow">
					<div class="layui-card text-center">
						<div class="layui-card-body">
							<div class="layadmin-homepage-pad-ver">
								<img class="layadmin-homepage-pad-img"
									src="layuiadmin/style/res/template/portrait.png" width="96"
									height="96">
							</div>
							<h4 class="layadmin-homepage-font">${user.username}</h4>
							<p class="layadmin-homepage-min-font">客户</p>
							<div class="layadmin-homepage-pad-ver">
								<a href="javascript:;" class="layui-icon layui-icon-cellphone"></a>
								<a href="javascript:;" class="layui-icon layui-icon-vercode"></a>
								<a href="javascript:;"
									class="layui-icon layui-icon-login-wechat"></a> <a
									href="javascript:;" class="layui-icon layui-icon-login-qq"></a>
							</div>
							<button class="layui-btn layui-btn-fluid">联系我</button>
						</div>
					</div>
					<p class="layadmin-homepage-about">关于我</p>
					<ul class="layadmin-homepage-list-group">
						<li class="list-group-item"><i
							class="layui-icon layui-icon-location"></i>中国</li>
						<li class="list-group-item"><a href="javascript:;"
							class="color"><i class="layui-icon layui-icon-snowflake"></i><span
								style="word-wrap: break-word;">https://weibo.com/</span></a></li>
					</ul>
					<div class="layadmin-homepage-pad-hor">
						<mdall>我是一个喜欢摄影，也喜欢写字，
						视角独特，充满着奇思妙想。有着极丰富的情感，和对生活的热情，能点燃观众心中爱的火焰；胡歌积极、乐观、坚强，脚踏实地地做好每一件事，真诚地对待身边每一个人</mdall>
					</div>
					<p class="layadmin-homepage-about">爱好</p>
					<ul class="layadmin-homepage-list-inline">
						<a href="javascript:;" class="layui-btn layui-btn-primary">写字</a>
						<a href="javascript:;" class="layui-btn layui-btn-primary">唱歌</a>
						<a href="javascript:;" class="layui-btn layui-btn-primary">摄影</a>
						<a href="javascript:;" class="layui-btn layui-btn-primary">旅游</a>
					</ul>
				</div>
			</div>
			<div class="layui-col-md10">
				<div class="layui-fluid layadmin-homepage-content">

					<div
						class="layui-row layui-col-space20 layadmin-homepage-list-imgtxt">
						<div>
							<div class="grid-demo">



								<!-- 用户订单信息列表 -->
								<div class="panel-body layadmin-homepage-shadow">
									<h3>订单列表</h3>
									<div class="media wow fadeInLeft animated" data-wow-delay=".5s">
										<table class="layui-hide" id="test" lay-filter="test"></table>

										<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">订单评论</a>

		</script>
									</div>
								</div>

							</div>
							<!-- 表单编辑事件 -->
							<!-- 隐藏表单 -->
							<div id="editcomment" style="display: none">



								<form class="layui-form" action="" lay-filter="example"
									id="myform" enctype="multipart/form-data">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">订单编号</label>
											<div class="layui-input-inline">
												<input type="text" name="orderid" id="orderid"
													readonly="readonly" class="layui-input">
											</div>
										</div>
										<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">订单状态</label>
											<div class="layui-input-inline">
												<input type="text" name="orderstatus" id="orderstatus"
													readonly="readonly" class="layui-input">
											</div>
										</div>
						<!-- 				<div class="layui-form-item">
											<label class="layui-form-label">订单状态</label>
											<div class="layui-input-inline">
												<select name="orderstatus" 
													id="orderstatus"  disabled="disabled">
													<option value="0" id="zero">退房</option>
													<option value="1" id="one">入住</option>
													<option value="2" id="two">预定</option>
													<option value="3" id="three">订单取消</option>
												</select>
											</div>
										</div> -->
										<div class="layui-inline">
											<label class="layui-form-label">用户姓名</label>
											<div class="layui-input-inline">
												<input type="text" name="username" id="username"
													readonly="readonly" class="layui-input">
											</div>
										</div>
										<div class="layui-inline" style="display: none">
											<label class="layui-form-label">用户编号</label>
											<div class="layui-input-inline">
												<input type="text" name="userid" id="userid"
													readonly="readonly" class="layui-input">
											</div>
										</div>
										<div class="layui-inline" style="display: none">
											<label class="layui-form-label">评论编号</label>
											<div class="layui-input-inline">
												<input type="text" name="commentid" id="commentid"
													readonly="readonly" class="layui-input">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label">评论内容</label>
											<div class="layui-input-inline">
												<input type="text" name="commentcontent" id="commentcontent"
													class="layui-input">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label">上传图片</label>
											<div class="layui-input-inline">
												<input type="file" name="commentfile" id="commentfile">
											</div>
										</div>




									</div>
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn btn-update" lay-submit=""
												lay-filter="demo3">提交评论</button>
										</div>
									</div>



								</form>
							</div>


						</div>

					</div>
				</div>
			</div>
		</div>
	</div>




	<!--features end here-->
	<!--footer start here-->
	<%@ include file="footer.jsp"%>
</body>
<script src="layuiadmin/layui/layui.js"></script>




<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="layuiadmin/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
	layui.use('table', function() {
		var table = layui.table;

		table.render({
			elem : '#test'
			//  ,url:'/test/table/demo1.json'
			,
			url : 'listcomment/${user.username}' //模拟接口
			,
			toolbar : '#toolbarDemo',
			title : '评论列表',
			cols : [ [ {
				field : 'orderid',
				title : '订单编号',
				sort : true
			}, {
				field : 'orderstatus',
				title : '订单状态',
				sort : true,
				templet : function(res) {
					if (res.orderstatus == 0)
						return "退房";
					if (res.orderstatus == 1)
						return "入住";
					if (res.orderstatus == 2)
						return "预定";
					if (res.orderstatus == 3)
						return "订单取消";
					if (res.orderstatus == null)
						return "订房失败";
				}
			}, {
				field : 'username',
				title : '用户名',
				sort : true
			}, {
				field : 'orderstartdate',
				title : '下单时间',
				sort : true
			}, {
				field : 'orderenedate',
				title : '退房时间',
				sort : true
			}, {
				field : 'orderdate',
				title : '入住时间',
				sort : true
			}, {
				field : 'roomtype',
				title : '房间类型',
				sort : true,
				templet : function(res) {
					if (res.roomtype == 0)
						return "总统套房";
					if (res.roomtype == 1)
						return "单人间";
					if (res.roomtype == 2)
						return "双人间";
					if (res.roomtype == 3)
						return "三人间";
					if (res.roomtype == null)
						return "未选择";
				}
			}, {
				field : 'roomsalary',
				title : '费用',
				sort : true
			}, {
				field : 'commentcontent',
				title : '评论信息',
				sort : true
			}, {
				field : 'commentfile',
				title : '评论图片上传',
				sort : true
			}, {
				fixed : 'right',
				title : '操作',
				toolbar : '#barDemo',
				width : 150
			} ]

			],
			page : true,
			id : 'testReload'
		});

		//表格数据重载，模糊查询
		var $ = layui.$, active = {
			reload : function() {
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('testReload', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						//这里传值给servlet
						content : demoReload.val()
					}
				});
			}
		};

		$('.demoTable .layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		//监听行工具事件
		table.on('tool(test)', function(obj) {
			var data = obj.data;
			if (obj.event === 'edit') {

				//给表单元素赋值
				$("#orderid").attr("value", data.orderid);
				$("#userid").attr("value", data.userid);
				$("#orderstatus").attr("value", data.orderstatus);
		/* 		if (data.orderstatus == 0) {
					$("#zero").attr("selected", true);
					$("#one").attr("selected", false);
					$("#two").attr("selected", false);
					$("#three").attr("selected", false);
				} else if (data.orderstatus == 1) {
					$("#zero").attr("selected", false);
					$("#one").attr("selected", true);
					$("#two").attr("selected", false);
					$("#three").attr("selected", false);
				} else if (data.orderstatus == 2) {
					$("#zero").attr("selected", false);
					$("#one").attr("selected", false);
					$("#two").attr("selected", true);
					$("#three").attr("selected", false);
				} else {
					$("#zero").attr("selected", false);
					$("#one").attr("selected", false);
					$("#two").attr("selected", false);
					$("#three").attr("selected", true);
				} */

				$("#username").attr("value", data.username);
				$("#commentid").attr("value", data.commentid);
				$("#commentcontent").attr("value", data.commentcontent);
				$("#commentfile").attr("value", data.commentfile);

				//添加一个弹出层
				var index1 = layer.open({
					type : 1,
					content : $("#editcomment"),
					title : '添加评论信息',

				});

				layui.form.render();//这个是表单的render，用于处理单选框、按钮、多选框不能被选中的问题
			}
		});

		//ajax修改提交,  此处搭配监听行工具事件  的修改操作
		layui.form.on('submit(demo3)', function(data) {
			//这里输出看下json对象
			//console.log(JSON.stringify(data.field));

			var form = new FormData(document.getElementById("myform"));

			$.ajax({
				'type' : 'post',
				'url' : 'editcomments',
				'data' : form,
				'processData' : false,
				'contentType' : false,
				'success' : function(cm) {
					layer.msg(cm.msg, {
						time : 1000,
					}, function() {
						if (cm.msg == "评价成功") {
							layer.closeAll();
							table.reload('testReload');

						}
					});
				}

			});

			return false;
		});

	});
</script>

</html>